<template>
  <el-col :span="widgetConfig.span || 24">
    <el-form-item
      :label="widgetConfig.showName + '：'"
      :prop="(widgetConfig.relation ? (widgetConfig.relation.variableName + '__') : '') + (widgetConfig.column || {}).columnName"
    >
      <el-upload
        v-if="!widgetConfig.readOnly"
        :class="{
          'upload-image-item': widgetConfig.isImage,
          'upload-image-multi': widgetConfig.column.maxFileCount !== 1
        }"
        :name="widgetConfig.fileFieldName"
        :headers="getUploadHeaders"
        :action="getActionUrl"
        :data="getUploadData"
        :on-success="onUploadSuccess"
        :on-remove="onRemoveFile"
        :on-error="onUploadError"
        :on-exceed="onUploadLimit"
        :limit="widgetConfig.column.maxFileCount"
        :show-file-list="widgetConfig.column.maxFileCount !== 1 || !widgetConfig.isImage"
        :list-type="getUploadListType"
        :file-list="getUploadFileList"
        :disabled="widgetConfig.disabled"
      >
        <!-- 上传图片 -->
        <template v-if="widgetConfig.isImage && widgetConfig.column.maxFileCount === 1">
          <div v-if="getUploadFileList && getUploadFileList[0] != null" style="position: relative">
            <img class="upload-image-show" :src="getUploadFileList[0].url">
            <div class="upload-img-del el-icon-close" @click.stop="onRemoveFile(null, null)" />
          </div>
          <i v-else class="el-icon-plus upload-image-item" />
        </template>
        <!-- 上传文件 -->
        <template v-else-if="!widgetConfig.isImage">
          <el-button :size="defaultFormItemSize" type="primary">点击上传</el-button>
        </template>
      </el-upload>
      <template v-else>
        <template v-if="widgetConfig.isImage">
          <el-image
            v-for="item in uploadWidgetImpl.fileList"
            :key="item.url"
            :preview-src-list="(uploadWidgetImpl.fileList || []).map(imgItem => imgItem.url)"
            class="table-cell-image"
            :src="item.url"
            fit="fill"
          />
        </template>
        <a v-for="item in uploadWidgetImpl.fileList" v-else :key="item.url" href="javascript:void(0);" @click="downloadFile(item.url, item.name)">
          {{ item.name }}
        </a>
      </template>
    </el-form-item>
  </el-col>
</template>

<script>
import { UploadWidget } from '@/utils/widget.js'
import { uploadMixin } from '@/core/mixins'

export default {
  mixins: [uploadMixin],
  props: {
    widgetConfig: {
      type: Object,
      required: true
    },
    flowData: {
      type: Object,
      default: () => {}
    },
    value: {
      type: String,
      default: ''
    },
    getDataId: {
      type: Function,
      default: undefined
    }
  },
  data() {
    return {
      uploadWidgetImpl: new UploadWidget(this.widgetConfig.column.maxFileCount)
    }
  },
  computed: {
    buildFlowParam() {
      const flowParam = {}
      if (this.flowData) {
        if (this.flowData.processDefinitionKey) flowParam.processDefinitionKey = this.flowData.processDefinitionKey
        if (this.flowData.processInstanceId) flowParam.processInstanceId = this.flowData.processInstanceId
        if (this.flowData.taskId) flowParam.taskId = this.flowData.taskId
      }

      return flowParam
    },
    getActionUrl() {
      if (this.widgetConfig.actionUrl == null || this.widgetConfig.actionUrl === '') {
        if (this.widgetConfig.relation) {
          return this.getUploadActionUrl('/service-workflow/b/form/onlineOperation/v1/uploadOneToManyRelation/' + (this.widgetConfig.datasource || {}).variableName)
        } else {
          return this.getUploadActionUrl('/service-workflow/b/form/onlineOperation/v1/uploadDatasource/' + (this.widgetConfig.datasource || {}).variableName)
        }
      } else {
        return this.getUploadActionUrl(this.widgetConfig.actionUrl)
      }
    },
    getDownloadUrl() {
      if (this.widgetConfig.downloadUrl == null || this.widgetConfig.downloadUrl === '') {
        if (this.widgetConfig.relation) {
          return '/service-workflow/b/form/onlineOperation/v1/downloadOneToManyRelation/' + (this.widgetConfig.datasource || {}).variableName
        } else {
          return '/service-workflow/b/form/onlineOperation/v1/downloadDatasource/' + (this.widgetConfig.datasource || {}).variableName
        }
      } else {
        return this.widgetConfig.downloadUrl
      }
    },
    getUploadData() {
      const temp = {
        ...this.buildFlowParam,
        datasourceId: (this.widgetConfig.datasource || {}).datasourceId,
        asImage: this.widgetConfig.isImage,
        fieldName: (this.widgetConfig.column || {}).columnName
      }
      if ((this.widgetConfig.relation || {}).relationId) temp.relationId = (this.widgetConfig.relation || {}).relationId
      return temp
    },
    getUploadListType() {
      if (this.widgetConfig.column.maxFileCount !== 1 && this.widgetConfig.isImage) {
        return 'picture-card'
      }
      return 'text'
    },
    getUploadFileList() {
      return this.uploadWidgetImpl ? this.uploadWidgetImpl.fileList : []
    }
  },
  watch: {
    value: {
      handler(newValue) {
        this.uploadWidgetImpl.fileList = []
        if (newValue != null) {
          const downloadParams = {
            ...this.buildFlowParam,
            datasourceId: this.widgetConfig.datasourceId,
            fieldName: this.widgetConfig.column.columnName,
            asImage: this.widgetConfig.isImage,
            dataId: this.getDataId(this.widgetConfig) || ''
          }
          if (this.widgetConfig.relationId) downloadParams.relationId = this.widgetConfig.relationId
          const temp = JSON.parse(newValue).map(item => {
            return {
              ...item,
              downloadUri: this.getDownloadUrl
            }
          })
          this.uploadWidgetImpl.fileList = this.parseUploadData(JSON.stringify(temp), downloadParams)
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    onValueChange() {
      this.$emit('input', this.fileListToJson(this.uploadWidgetImpl.fileList), this.widgetConfig)
    },
    onUploadSuccess(response, file, fileList) {
      if (response.success) {
        file.filename = response.data.filename
        file.url = URL.createObjectURL(file.raw)
        this.uploadWidgetImpl.onFileChange(file, fileList)
        this.onValueChange()
      } else {
        this.$message.error(response.message)
      }
    },
    onRemoveFile(file, fileList) {
      this.uploadWidgetImpl.onFileChange(file, fileList)
      this.onValueChange()
    },
    onUploadError(e, file, fileList) {
      this.$message.error('文件上传失败')
    },
    onUploadLimit(files, fileList) {
      if (this.widgetConfig.column.maxFileCount != null && this.widgetConfig.column.maxFileCount > 0) {
        this.$message.error('已经超出最大上传个数限制')
      }
    }
  }
}
</script>

<style>
</style>
